<template>
    <view>
        <!-- pages/academy_list/index.wxml -->
        <!-- 轮播图 -->
        <view class="banner">
            <swiper class="swiper1" :indicator-dots="true" :autoplay="true" interval="2000" duration="300" indicator-active-color="#fff" :circular="true">
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/y4fPLqx0XEqQ53ANQCOmK2bYHooBiTr4/beishan1.jpg" mode="aspectFill" />
                </swiper-item>
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/3vF13GCvvyBsJSatlNewRhrw7wKhJrp8/beishan2.jpg" mode="aspectFill" />
                </swiper-item>

                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/QJeS7c3jEsyhWNcLCYUQAPqGn0B6NIPO/beishan3.jpg" mode="aspectFill" />
                </swiper-item>
            </swiper>
        </view>
        <!-- 书院简介 -->
        <view class="intro cu-list menu" @tap="handleIntro">
            <view class="cu-item arrow">
                <text class="text-xxl text-bold">北山书院</text>
            </view>
        </view>
        <!-- 书院活动室列表 -->
        <view class="list cu-list menu">
            <view class="cu-item" @tap="handleRoom" v-for="(item, index) in 6" :key="index">
                <view class="content flex" hover-class="none">
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/y4fPLqx0XEqQ53ANQCOmK2bYHooBiTr4/beishan1.jpg" mode="aspectFill " />
                    <view class="right margin-left">
                        <view class="top">
                            <text class="text-bold text-xl">坚韧会议室</text>
                        </view>
                        <view class="bottom flex justify-between">
                            <view class="margin-top-xs">
                                状态：
                                <text class="iconfont .icon-duigouxiao text-xs"></text>
                            </view>
                            <text class="margin-top-xs">容纳：15-25人</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/academy_list/index.js
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handleIntro() {
            uni.navigateTo({
                url: '/pages/academy_intro/index'
            });
        },

        handleRoom() {
            uni.navigateTo({
                url: '/pages/academy_room/index'
            });
        }
    }
};
</script>
<style>
/* pages/academy_list/index.wxss */
/* 轮播图 */
.swiper1 {
    width: 740rpx;
    height: 276rpx;
    /* border: 1rpx solid red; */
    margin: auto;
    margin-bottom: 50rpx;
    /* border-radius: 5%; */
    overflow: hidden;
    border-radius: 18rpx;
    box-sizing: border-box;
    transform: translateY(0);
    line-height: 1rpx;
}

swiper-item image {
    width: 100%;
    height: 100%;
}

/* 书院简介 */
.intro {
    border-bottom: 1rpx solid #ddd;
}
.intro text {
    color: #39b54a;
}
.intro .cu-item {
    height: 120rpx;
}
/* 书院活动室列表 */
.list .cu-item {
    height: 150rpx;
}

.list .content image {
    width: 110rpx !important;
    height: 110rpx !important;
    /* border: 1rpx solid red; */
    border-radius: 5%;
}

.icon-duigouxiao {
    color: #39b54a;
}

.icon-cuowuguanbiquxiao-yuankuang {
    color: #e54d42;
}

.bottom {
    width: 550rpx;
    /* border: 1rpx solid red; */
}
</style>
